<script setup lang="ts">
// 导入类型、组件、接口、模块
import type { GetGoodsPayloadType, GetGoodsResType, Goods } from '@/api/goods/types'
import type { FormRules, FormInstance } from 'element-plus'

import mock from '~mock/goods'

import { ref, reactive } from 'vue'
import { useConfirm } from '@/hooks/useConfirm'

// 是否展开
const isExpand = ref<boolean>(false)

// 表单数据（切记切记切记 全部用我给的单词）
const formData = reactive<GetGoodsPayloadType>({
	pagenum: 1,
	pagesize: 10,

	goods_name: '',

	created_at: []
})
const formRules = reactive<FormRules>({})
// 表单提交
const formRef = ref<FormInstance>()
const handleSubmit = () => {
	formRef.value?.validate((isSuccess) => {
		if (isSuccess) {
			console.log('搜索：', formData)
		}
	})
}
const handleReset = () => {
	formRef.value!.resetFields()
}

// 表格数据
const tableData = reactive<GetGoodsResType>({
	data: mock.data,
	total: mock.total
})

// 批量删除
let ids: Array<number | string> = []
const handleCheckboxChange = (rowArr: Goods[]) => {
	// console.log('所有勾选数据：', rowArr)  数组里面是一个个当前行数据
	ids = [] // 切记上一次保存的
	rowArr.forEach((row: Goods) => {
		ids.push(row.id) // 重新保存
	})
}
const handleDeletes = () => {
	console.log('要删除的数据编号', ids)
}

const handleDelete = (id: number | string) => {
	console.log(id)
	useConfirm()
}

const handleSort = (data: any) => {
	console.log('自定义排序：', data)
}

// 分页
const handleSizeChange = (val: number) => {
	console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
	console.log(`current page: ${val}`)
}
</script>

<template>
	<QfBox>
		<!-- 筛选 -->
		<template #filter>
			<el-form :inline="true" :model="formData" :rules="formRules" ref="formRef">
				<el-form-item label="商品名" prop="goods_name">
					<el-input palceholder="请输入商品名" v-model="formData.goods_name" clearable />
				</el-form-item>
				<el-form-item label="创建于" v-show="isExpand">
					<el-date-picker
						v-model="formData.created_at"
						type="datetimerange"
						range-separator="到"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
					/>
				</el-form-item>
				<el-form-item label="">
					<el-button type="primary" @click="handleSubmit"><span class="iconfont icon-sousuo"></span>搜索</el-button>
					<el-button type="default" @click="handleReset">重置</el-button>
					<el-button type="primary" link @click="isExpand = !isExpand">
						{{ isExpand ? '收起' : '展开' }}
						<el-icon>
							<ArrowDown v-if="!isExpand" />
							<ArrowUp v-else />
						</el-icon>
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<!-- 筛选 -->

		<!-- 内容 -->
		<!-- 按钮控件 -->
		<el-row>
			<el-button type="danger" @click="handleDeletes"><span class="iconfont icon-shanchu"></span>批量删除</el-button>
			<el-button type="primary" @click="$router.push('/user/create')"><span class="iconfont icon-jiahao"></span>添加</el-button>
		</el-row>
		<!-- 按钮控件 -->

		<!-- 表格 -->
		<el-table :data="tableData.data" :border="true" @selection-change="handleCheckboxChange" @sort-change="handleSort">
			<el-table-column align="center" label="复选" fixed="left" type="selection" width="55"></el-table-column>
			<!-- <el-table-column align="center" label="编号" prop="id" width="180" sortable="custom"></el-table-column> -->
			<el-table-column align="center" label="编号" prop="id" width="180" sortable></el-table-column>
			<el-table-column align="center" label="所属门店" prop="store" width="100"></el-table-column>
			<el-table-column align="center" label="封面" width="100">
				<template #default="scope">
					<el-avatar shape="square" :size="60" fit="fill" :src="scope.row.img" />
				</template>
			</el-table-column>
			<el-table-column align="center" label="标题" prop="title" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column align="center" label="库存" prop="goods_number" width="120"></el-table-column>
			<el-table-column align="center" label="市场价" prop="market_price" width="120"></el-table-column>
			<el-table-column align="center" label="促销价" prop="shop_price" width="120"></el-table-column>
			<el-table-column align="center" label="创建于" prop="created_at" width="180"></el-table-column>
			<el-table-column align="center" label="操作" fixed="right" width="240">
				<template #default="scope">
					<el-button type="primary" size="small">
						<span class="iconfont icon-bianji"></span>
					</el-button>
					<el-button type="danger" size="small" @click="handleDelete(tableData.data[scope.$index].id)">
						<span class="iconfont icon-shanchu"></span>删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 表格 -->

		<!-- 分页 -->
		<el-pagination
			background
			v-model:current-page="formData.pagenum"
			v-model:page-size="formData.pagesize"
			:page-sizes="[10, 50, 100, 150]"
			layout="total, sizes, prev, pager, next, jumper"
			:total="tableData.total"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		/>
		<!-- 分页 -->
		<!-- 内容 -->
	</QfBox>
</template>

<style lang="scss" scoped></style>
